<template>
  <a-layout-content style="margin: 0 16px">
    <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
      <a-button type="primary" @click="showGroupvisible()">新增业务</a-button>
      <!-- 新增业务弹出框 -->
      <a-modal :visible="groupvisible" title="业务分组" @ok="saveGroupName" @cancel="closeGroupaddBtn" cancelText="取消" okText="添加">
        <a-form :model="Addform" :rules="[{ required: true, message: '请输入模板名' }]">
          <a-form-item ref="groupName" label="分组名称" name="groupName" class="label-item" prop="groupName">
            <a-input placeholder="请输入最长40个汉字" v-model:value="Addform.groupName" autoComplete="off" />
          </a-form-item>
        </a-form>
      </a-modal>
      <!-- -------------------------------- -->
      <a-button type="primary" @click="showScenevisible()" style="margin-left:10px">新增场景</a-button>
      <!-- 业务场景表格 -->
      <a-table class="assignmentTable" bordered :pagination="false" :data-source="AlldataSource" rowKey="id" :columns="columns" childrenColumnName="sceneList">
        <span slot="sceneStatus" slot-scope="text, record">
          <a-switch v-if="record.sceneList ? false : true" :checked="record.sceneStatus == 0 ? true : false" @change="changeSwitch(record.id, record.sceneStatus)" />
        </span>
        <span slot="edit" slot-scope="text, record">
          <a type="link" v-if="record.groupName" @click="onEditGroup(record.id, record.groupName)">编辑</a>
          <a type="link" v-if="!record.groupName" @click="onEdit(record.id, record.sceneName, record.taskOrder)">编辑</a>
          <a type="link" v-if="!record.groupName" style="margin-left:10px" @click="checkTask(record.id, record.sceneName,record)">任务</a>
        </span>
      </a-table>
    </div>
    <!-- 新增场景弹出框 -->
    <a-modal :visible="scenevisible" :title="editId ? '编辑场景' : '新增场景'" @ok="Save" @cancel="close" cancelText="取消" :okText="editId ? '保存' : '添加'">
      <a-form :model="formState" :rules="rules">
        <!-- 分组名称输入框 -->
        <a-form-item ref="sceneName" label="场景名称" name="sceneName" class="label-item">
          <a-input v-model:value="formState.sceneName" placeholder="请输入场景标题" autoComplete="off" />
        </a-form-item>
        <!-- <a-form-item ref="sceneOrder" label="场景排序" name="sceneOrder" class="label-item">
                <a-input-number id="inputNumber" v-model:value="formState.sceneOrder" :min="1" :max="1000000" :controls="false" />
            </a-form-item> -->
        <!-- 选择下拉框 -->
        <a-form-item ref="sceneGroup" label="业务分组" name="sceneGroup" v-if="!editId">
          <a-select
            
            v-model:value="formState.sceneGroup"
            style="width: 120px"
            :labelInValue="true"
            :options="groupOptions"
            :getPopupContainer="
              triggerNode => {
                return triggerNode.parentNode
              }
            "
          >
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </a-layout-content>
</template>

<script>
import { getAllList, addBsiness, updateGroup, delBsiness, addScene, updateScene, updateStatus, getGroupValue } from '@/api/task/taskscene'

export default {
  name: 'Home',
  components: {},

  data() {
    return {
      time:'',
      formState: {
        sceneName: '',
        sceneGroup: '',
        sceneOrder: ''
      },
      // fieldNames: { label: 'groupName', value: 'id' },
      rules: {
        groupName: [
          {
            required: true,
            min: 3,
            max: 40,
            message: '业务分组名称长度需为3~40之间',
            trigger: 'blur'
          }
        ],
        sceneName: [
          {
            required: true,
            min: 3,
            max: 40,
            message: '场景名称长度需在3-40之间',
            trigger: 'blur'
          }
        ],
        sceneGroup: [
          {
            required: true,
            message: '请选择业务分组'
          }
        ]
      },
      Addform: {},
      groupvisible: false,
      scenevisible: false,
      editGroupId: '',
      editId: '',
      switchStatus: '',
      AlldataSource: [],
      groupOptions: [],
      columns: [
        {
          title: '业务',
          dataIndex: 'groupName',
          width: '23%'
        },
        {
          title: '场景',
          dataIndex: 'sceneName',
          width: '30%'
        },
        {
          title: '创建时间',
          dataIndex: 'createDate',
          width: '20%'
        },
        {
          title: '状态',
          dataIndex: 'sceneStatus',
          width: '15%',
          key: 'sceneStatus',
          scopedSlots: { customRender: 'sceneStatus' }
        },
        {
          title: '操作',
          dataIndex: 'edit',
          key: 'edit',
          width: '15%',
          scopedSlots: { customRender: 'edit' }
        }
      ]
    }
  },

  created() {
    this.getScene()
    this.getSelectGroup()
   
    // console.log(this.time);
  },

  methods: {
       getCurrentTime() {
        //获取当前时间并打印
    var _this = this;
    let yy = new Date().getFullYear();
    let mm = new Date().getMonth()+1;
    let dd = new Date().getDate();
    let hh = new Date().getHours();
    let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
    let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
    _this.gettime = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
    console.log(_this.gettime)  
    this.time=_this.gettime
    },
    getValue(value) {
      console.log(`selected ${value}`)
    },
    showGroupvisible() {
    (this.groupvisible = true)
    },
    showScenevisible() {
      this.close()
      this.getScene()
      this.getSelectGroup()
      this.scenevisible = true
      
    },
    saveGroupName() {
      if (this.Addform.groupName === ''||!this.Addform.groupName) {
        this.$message.warning('内容不能为空')
      }else if(this.Addform.groupName.length>40){
        this.$message.warning('内容不能超过40个字符')
        this.Addform.groupName = ''
      }else if(this.Addform.groupName.includes(' ')){
        this.$message.warning('内容不能包含空格')
      } else {
        if (this.editGroupId) {
          updateGroup(
            {
              id: this.editGroupId,
              groupName: this.Addform.groupName.trim()
            },
            res => {
              this.closeGroupaddBtn()
              let code = res.code
              if (code === 200) {
                this.$message.success('编辑成功')
                this.getScene()
              } else {
                this.$message.error(res.msg)
              }
              console.log('updateGroup', res)
            }
          )
        } else {
           this.getCurrentTime()
          addBsiness(
            
            {
              groupName: this.Addform.groupName.trim(),
              createDate:this.time
            },
            res => {
              console.log(res)
              this.closeGroupaddBtn()
              let code = res.code
              if (code === 200) {
                this.$message.success('添加成功')
                this.getScene()
              } else {
                this.$message.error(res.msg)
              }
            }
          )
        }
      }
    },
    // 表格开关
    changeSwitch(id, val) {
      if (val) {
        this.switchStatus = 0
        this.$message.success('开启成功')
      } else {
        this.switchStatus = 1
        this.$message.success('关闭成功')
      }
      updateStatus(
        {
          id,
          sceneStatus: this.switchStatus
        },
        res => {
          console.log(res)
          this.getScene()
        }
      )
    },
    // 获取全部列表（业务+场景）
    getScene() {
      let data = {}
      getAllList(data, res => {
        this.AlldataSource = res.data
        console.log(res)
      })
      this.getSelectGroup()
    },
    getSelectGroup() {
      let data = {}
      getGroupValue(data, res => {
        this.groupOptions = res.data
        console.log(res)
      })
    },
    onEditGroup(id, name) {
      this.groupvisible = true
      this.Addform.groupName = name
      this.editGroupId = id
    },
    Save() {
      if (this.formState.sceneName === '') {
        this.$message.warning('内容不能为空')
      } else {
        if (this.editId) {
          // 判断id，如果有id则是编辑
          updateScene(
            {
              id: this.editId,
              sceneName: this.formState.sceneName.trim(),
              taskGroupId: this.formState.sceneGroup
              // taskOrder:this.formState.sceneOrder
            },
            res => {
              console.log(res)
              this.scenevisible = false

              let code = res.code
              if (code === 200) {
                this.getScene()
                this.$message.success('编辑成功')
              } else {
                this.$message.error(res.msg)
              }
            }
          )
        } else {
          // 判断id，如果没有则是添加

          addScene(
            {
              sceneName: this.formState.sceneName.trim(),
              taskGroupId: this.formState.sceneGroup.key
              // taskOrder:this.formState.sceneOrder
            },
            res => {
              console.log(res)

              this.scenevisible = false
              let code = res.code
              if (code === 200) {
                this.getScene()
                this.$message.success('添加成功')
              } else {
                this.$message.error(res.msg)
              }
            }
          )
        }
      }
    },
    closeGroupaddBtn() {
      (this.Addform.groupName = ''), (this.groupvisible = false)
    },
    close() {
      this.editId = ''
      this.scenevisible = false;(this.formState.sceneName = ''), (this.formState.sceneGroup = ''), (this.formState.sceneOrder = '')
    },
    delBtn(id) {
      delBsiness(
        {
          id
        },
        res => {
          this.getScene()
          console.log(res)
        }
      )
      this.$message.success('删除成功')
    },
    onEdit(id, name, sort) {
      this.scenevisible = true
      this.editId = id
      this.formState.sceneName = name
      this.formState.sceneOrder = sort
    },
    //点击任务按钮
    checkTask(id, name,record) {
      console.log(record);
      console.log(id)
      console.log(name)
      this.$router.push({
        path: '/task/release',
        query: {
          id
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.ant-form-item {
  display: flex;
}
// #components-layout-demo-side .logo {
//   height: 32px;
//   margin: 16px;
//   background: rgba(255, 255, 255, 0.3);
// }
.assignmentTable {
  margin-top: 20px;
}
.site-layout .site-layout-background {
  background: #fff;
}
[data-theme='dark'] .site-layout .site-layout-background {
  background: #141414;
}
.label-item {
  .ant-form-item-label {
    label {
      width: 70px;
      text-align: center;
    }
  }
}
</style>
